<template>
  <div class="page">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="footer-content">
      <footer>
        <router-link
          v-for='(item, index) in navList'
          :to='item.path'
          :key='index'
          :class="{'active':activeRoute == item.path}">
          <div :class="'tab-'+index"></div>
          <p>{{item.name}}</p>
        </router-link>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navList: [
        {'path': '/home', 'name': '首页'},
        {'path': '/record', 'name': '发布'},
        {'path': '/mine', 'name': '我的'}
      ]
    }
  },
  computed: {
    activeRoute () {
      return this.$route.path
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
  @import 'styles/common.scss';
  .page{
    background: #f5f5f5;
    min-height: 100vh;
  }
  .footer-content {
    padding-bottom: rem(140);
    footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: rem(100);
      background: #fff;
      z-index: 99;
      box-shadow: 0 rem(-2) rem(10) rgba(0,0,0,.1);
      display: flex;
      justify-content: space-around;
      align-items: center;
      a {
        position: relative;
        text-decoration: none;
        flex: 1;
        text-align: center;
        box-sizing: border-box;
        display: block;
        .tab-0, .tab-1, .tab-2, .tab-3, .tab-4 {
          display: inline-block;
          height: rem(40);
          width: rem(40);
          background-size: rem(40) rem(40);
          background-repeat: no-repeat;
        }
        .tab-0 {background-image: url("../assets/images/ico_home.png");}
        .tab-1 {background-image: url("../assets/images/ico_mess.png");}
        .tab-2 { background-image: url("../assets/images/ico_mine.png");}
        &:hover {
          text-decoration: none;
        }
        &.router-link-active.active {
          .tab-0 {background-image: url("../assets/images/ico_home_on.png");}
          .tab-1 {background-image: url("../assets/images/ico_mess_on.png");}
          .tab-2 { background-image: url("../assets/images/ico_mine_on.png");}
        }
        p{
          margin-top: rem(6);
          font-size: rem(24);
          color: #484848;
        }
      }
    }
  }
</style>
